<template>
    <div class="menu-box">
        <div class="top-menu">
            <div class="left">
                <div class="logos">
                    <img src="@/assets/logo.png" alt="">
                    <span>启帆知识图谱平台</span>
                </div>
                <div class="silder-index">
                    <div class="menu-li" @click="menuClick(0)" :class="{ active: props.activeItem == 0 }">首页</div>
                    <div class="menu-li" @click="menuClick(1)" :class="{ active: props.activeItem == 1 }">学习中心</div>
                </div>
            </div>
            <div class="right">
                <div class="silder-index" ref="noticeRef" v-click-outside="onClickNotice">
                    <img src="@/assets/tongzhi.png" alt="">
                    <span class="dot">6</span>
                </div>
                <el-popover ref="popoverRef" popper-class="notice-box" :virtual-ref="noticeRef" trigger="click" virtual-triggering :show-arrow="false" width="350" popper-style="border-radius: 10px" placement="top-end">
                    <div class="notice-div">
                        <div class="custom-tabs">
                            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                                <el-tab-pane :label="noticeTitle" name="0">
                                    <el-scrollbar height="260px">
                                        <div v-for="item in 20" :key="item" class="scroll-item">
                                            <div class="header">
                                                <div class="left">
                                                    <div class="dot"></div>
                                                    <div class="title">课后练习01</div>
                                                </div>
                                                <div class="tage">课后练习</div>
                                            </div>
                                            <div class="desc">
                                                <div class="left">
                                                    <div class="times">
                                                        <span>截止时间：</span>
                                                        <span>2025-9-12 01:03:20</span>
                                                    </div>
                                                    <div class="homework">
                                                        <span>作业要求：</span>
                                                        <span>完成第一章内容复习占位完成第一章内容复习占位</span>
                                                    </div>
                                                </div>
                                                <div class="lasttime">49天前</div>
                                            </div>
                                        </div>
                                    </el-scrollbar>
                                </el-tab-pane>
                                <el-tab-pane :label="homeworkTitle" name="1">
                                    <el-scrollbar height="260px">
                                        <div v-for="item in 20" :key="item" class="scroll-item">
                                            <div class="header">
                                                <div class="left">
                                                    <div class="dot"></div>
                                                    <div class="title">222222222222222</div>
                                                </div>
                                                <div class="tage">课后练习</div>
                                            </div>
                                            <div class="desc">
                                                <div class="left">
                                                    <div class="times">
                                                        <span>截止时间：</span>
                                                        <span>2025-9-12 01:03:20</span>
                                                    </div>
                                                    <div class="homework">
                                                        <span>作业要求：</span>
                                                        <span>完成第一章内容复习占位完成第一章内容复习占位</span>
                                                    </div>
                                                </div>
                                                <div class="lasttime">49天前</div>
                                            </div>
                                        </div>
                                    </el-scrollbar>
                                </el-tab-pane>
                            </el-tabs>
                            <div class="clear-box">
                                <img src="@/assets/clear.png" alt="">
                                <span>清空待办</span>
                            </div>
                        </div>
                    </div>
                </el-popover>
                <div class="user-box">
                    <div class="avatar-box">
                        <img src="@/assets/user.png" alt="">
                    </div>
                    <div class="nickname-box" ref="userRef" v-click-outside="onClickUser">
                        <span>你好，</span>
                        <span>颜彤</span>
                        <el-icon><ArrowDownBold /></el-icon>
                    </div>
                </div>
                <el-popover ref="userpopoverRef" popper-class="notice-box" :virtual-ref="userRef" trigger="click" virtual-triggering width="150" popper-style="border-radius: 10px" placement="top-start">
                    <div class="user-div">
                        <div class="user-item" @click="userEdit">
                            <img src="@/assets/stuuser.png" alt="">
                            <span>个人信息</span>
                        </div>
                        <div class="user-item" @click="logout">
                            <img src="@/assets/logout.png" alt="">
                            <span>退出登录</span>
                        </div>
                    </div>
                </el-popover>
            </div>
        </div>
        <el-dialog v-model="userDialogShow" width="50%" height="600px" top="15vh">
            <div class="user-edit-box">
                <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" >
                    <div class="avatar-box">
                        <span>更换头像</span>
                        <img :src="imageUrl" class="avatar" />
                    </div>
                </el-upload>
                <div class="username">您好，{{ nickname }}</div>
                <div class="user-info">
                    <div class="user-li">
                        <div class="label">机构/学校：</div>
                        <el-input v-model="input" placeholder="请输入机构/学校名称" />
                    </div>
                    <div class="user-li">
                        <div class="label">学生姓名：</div>
                        <el-select v-model="value" class="m-2" placeholder="请选择专业">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                </div>
                <div class="user-info">
                    <div class="user-li">
                        <div class="label">学生账号：</div>
                        <el-input v-model="account" disabled />
                    </div>
                    <div class="user-li">
                        <div class="label">学生姓名：</div>
                        <el-input v-model="input" placeholder="请输入学生姓名" />
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="userEdit"> 取消 </el-button>
                    <el-button type="primary" @click="userEdit"> 保存 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
    import { ref,unref,defineProps, defineEmits } from 'vue'
    import { ArrowDownBold } from '@element-plus/icons-vue'
    const props = defineProps({
        activeItem: { type: Number, default: 0 }
    });
    const emit = defineEmits(['update:activeItem']);
    const menuClick = (value) => {
        emit('update:activeItem', value);
    }
    import { ElMessageBox, ClickOutside as vClickOutside } from 'element-plus'
    const noticeRef = ref()
    const userRef   = ref()
    const popoverRef = ref()
    const userpopoverRef = ref()
    const activeName = ref("0")
    const noticeTitle = ref("通知（0）")
    const homeworkTitle = ref("作业（10）")
    const userDialogShow = ref(false)
    const imageUrl = ref(require("@/assets/avatar.png"))
    const nickname = ref("袁同学")
    const account = ref("teststu")
    const onClickNotice = () => {
        unref(popoverRef).popperRef?.delayHide?.()
    }
    const onClickUser = () => {
        unref(userpopoverRef).popperRef?.delayHide?.()
    }
    const userEdit = () => {
        userDialogShow.value = !userDialogShow.value
    }
    const logout = () => {
        ElMessageBox.confirm('是否确认退出登录？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            customClass: 'my-custom-message-box'
        }).then(() => {
            console.log("退出登录")
        }).catch(() => {
            console.log("取消退出")
        });
    }

    
</script>
<style scoped>
    .user-info .el-input,.el-select{width: 100%;height: 35px;}
    :deep(body){ width: 100%!important; }
    .menu-box .top-menu{background: #fff;height: 60px;width: 100%;display: flex;flex-direction: row;justify-content: space-between;margin: 0 auto;background: #C6E9FF;}
    .menu-box .top-menu .left{display: flex;flex-direction: row;justify-content: space-around;}
    .menu-box .top-menu .left .logos{display: flex;flex-direction: row;justify-content: center;align-items: center;}
    .menu-box .top-menu .left .logos img{width: 25px;height: 25px;margin-left: 40px;cursor: pointer;}
    .menu-box .top-menu .left .logos span{margin-left: 10px;font-family: 微软雅黑, Microsoft YaHei, SimSun;cursor: pointer;font-size: 20px;font-weight: 500;}
    .menu-box .top-menu .left .silder-index{display: flex;flex-direction: row;justify-content: center;align-items: center;margin-left: 110px;}
    .menu-box .top-menu .left .silder-index .active{color: #3D61F7;display: block;border-bottom: 4px solid #3D61F7}
    .menu-box .top-menu .left .silder-index .menu-li{font-family: 微软雅黑, Microsoft YaHei, SimSun;margin-left: 50px;cursor: pointer;height: calc(100% - 4px);display: flex;align-items: center;}
    .menu-box .top-menu .right{display: flex;flex-direction: row;justify-content: space-around;margin-right: 40px;align-items: center;}
    .menu-box .top-menu .right .silder-index{ margin-right: 30px;position: relative;cursor: pointer; }
    .menu-box .top-menu .right .silder-index .dot{ position: absolute;top: -5px;width: 20px;height: 20px;background: red;font-family: 微软雅黑, Microsoft YaHei, SimSun;color: #fff;font-size: 12px;text-align: center;line-height: 20px;border-radius: 20px;right: -10px; }
    .menu-box .top-menu .right .silder-index img{width: 25px;height: 25px;cursor: pointer;}
    .menu-box .top-menu .right .user-box{display: flex;flex-direction: row;align-items: center;}
    .menu-box .top-menu .right .user-box .avatar-box{width: 40px;height: 40px;background: #D0D3DB;border-radius: 40px;display: flex;flex-direction: row;justify-content: center;align-items: end;}
    .menu-box .top-menu .right .user-box .avatar-box img{width: 30px;height: 30px;border-radius: 30px;}
    .menu-box .top-menu .right span{font-family: 微软雅黑, Microsoft YaHei, SimSun;}
    .menu-box .top-menu .right .nickname-box{display: flex;flex-direction: row;gap: 5px;align-items: center;cursor: pointer;}
    .menu-box .top-menu .right .nickname-box span{display: block;margin-left: 4px;}
    .notice-box{margin: 0;padding: 20px;}
    .notice-div{width: 310px;height: 320px;display: flex;flex-direction: row;}
    .custom-tabs{ display: flex;flex-direction: row;justify-content: space-between;width: 100%;position: relative; }
    .clear-box{ display: flex;flex-direction: row;height: 40px;align-items: center;cursor: pointer;position: absolute;right: 0; }
    .clear-box img{ width: 20px;height: 20px; }
    .clear-box span{ margin-left: 5px; }
    .scroll-item{ width: 300px; padding: 10px; background: #FAFAFA; margin: 5px; border-radius: 10px;cursor: pointer; }
    .scroll-item:hover{background: #E6F5FE;}
    .scroll-item .header{ display: flex;flex-direction: row;justify-content: space-between;align-items: center; }
    .scroll-item .header .left{ display: flex;flex-direction: row;justify-content: start;gap: 5px;align-items: center; }
    .scroll-item .header .dot{ width: 5px;height: 5px;background: red;border-radius: 5px; }
    .desc{ display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding: 5px 0 0 5px; }
    .desc .left{ width: 70%; }
    .desc .left .times{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px; }
    .desc .left .homework{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-top: 5px; }
    .desc .lasttime{width: 20%;text-align: right;}
    .user-div{display: flex;flex-direction: column;justify-content: center;align-items: center;}
    .user-item{width: 90%;text-align: center;padding: 10px;border-bottom: 1px solid #dfdfdf;cursor: pointer;display: flex;flex-direction: row;justify-content: center;align-items: center;}
    .user-item:hover{background: #E6F5FE;}
    .user-item img{width: 20px;height: 20px;}
    .user-item span{margin-left: 5px;}
    .user-edit-box .avatar-box{position: relative;border-radius: 100px;width: 100px;height: 100px;overflow: hidden;}
    .user-edit-box .avatar{width: 100px;height: 100px;}
    .user-edit-box span{position: absolute;bottom: 0px;left: 0;width: 100px;text-align: center;background: rgb(0,0,0,0.5);color: #fff;font-family: 微软雅黑, Microsoft YaHei, SimSun;cursor: pointer;font-size: 12;padding-bottom: 5px;}
    .user-edit-box .username{width: 100%;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;font-weight: 600;color: #000;margin-top: 10px;}
    .user-edit-box .user-info{display: flex;flex-direction: row;width: 60%;margin: 20px auto;gap: 10px;align-items: center;}
    .user-edit-box .user-info .label{line-height: 35px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;width: 120px;}
    .user-edit-box .user-info .user-li{display: flex;flex-direction: row;width: 100%;}
</style>